body {
	position: relative;
	background: rgb(255,255,255);
}
button{
	vertical-align:middle;
}
input{
	vertical-align:middle;
}
#BGCanvas{
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

#main {
	position: relative;
	width: 644.8px;
	left: 0px;
	right: 0px;
	margin: auto;
	height: auto;
	background: rgb(250,250,250);
}

#head {
	position: relative;
	height: 100px;
	top: 0px;
	text-align: center;
	line-height: 50px;
	color: rgb(0,0,0);
	border-style: ridge;
	background: rgb(220,226,240);
	background-image: url(../img/ocean.png);
}
#JerryRatCanvas{
	position: absolute;
	width: 640px;
	height: 100px;
	top: 0px;
	left: 0px;
}

#body {
	position: relative;
	height: auto;
	border-style: ridge;
	background: rgb(250,245,250);
}

#select-panel {
	position: relative;
	width: 100%;
	height: auto;
}

.select-nav {
	position: relative;
	width: 100%;
	height: 50px;
	background: rgb(222,220,215);
}

.select-nav button {
	position: relative;
	width: 50px;
	height: 50px;
	border-style: groove;
	border-color: rgb(200,200,200);
}

.select-nav button img {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
}

.select-nav button div {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	line-height: 50px;
	color: rgb(100,95,90);
}

.select-content {
	position: relative;
	width: 100%;
	height: 500px;
}

.select-content .content {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(230,188,130);
	text-align: center;
	visibility: hidden;
}

.Home .wellcom {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgb(240,240,240);
}

.Home .wellcom .title{
	position: relative;
	font-weight: 300;
	margin: 0px;
	padding: 20px;
}

.Home .wellcom .point{
	position: relative;
	text-align: left;
	margin: 0px 80px;
}

.Home .wellcom .point h4{
	margin: 10px 0px;
	color: #0000C0;
	font-size: 20px;
	font-family: 宋体;
}

.Home .wellcom .point p{
	margin: 5px 0px;
}

#ServerConfiguration {
	position: relative;
	height: 200px;
	background: rgb(80,200,255);
}

#webBack {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 200px;
}

#web {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 200px;
	background-image: url(../img/web_bg.png);
}

#webFont {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 200px;
}

#ServerConfiguration #context {
	position: absolute;
	width: 440px;
	height: 200px;
	left: 200px;
	top: 0px;
	background: rgb(240,235,230);
}

#ServerConfiguration #context #inside {
	position: absolute;
	width: 440px;
	height: 150px;
	left: 0px;
	top: 25px;
}

#ServerConfiguration #context span {
	position: absolute;
	left: 50px;
	width: 100px;
	text-align: center;
	background: rgb(220,230,235);
}

#ServerConfiguration #context input {
	position: absolute;
	left: 160px;
	width: 100px;
	text-align: center;
}

#ServerConfiguration #context select {
	position: absolute;
	left: 280px;
	width: 100px;
	text-align: center;
}

#WebProjects {
	position: relative;
	background: rgb(24,220,160);
	height: 300px;
}

#WebProjects-title {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 300px;
	color: rgb(20,40,50);
	background: rgb(240,220,190);
}

#WebProjects-context {
	position: absolute;
	left: 100px;
	top: 0px;
	width: 540px;
	height: 300px;
	background: rgb(240,200,150);
	overflow-y: scroll;
}

#WebProjects-context span {
	top: 0px;
	width: 80px;
	height: 30px;
	background: rgb(200,205,210);
}

#WebProjects-context .name {
	width: 200px;
	height: 30px;
}
#WebProjects-context .remove {
	width: 30px;
	height: 30px;
}
#WebProjects-context .add {
	width: 80px;
	height: 40px;
}

.Project .projectConfig{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 320px;
	height: 500px;
	background: rgb(220,255,255);
}

.Project .projectConfig .config{
	position: relative;
	width: 315.2px;
	height: 95.2px;
	background: rgb(210,208,195);
	line-height: 23.8px;
	border-style: ridge;
}

.Project .projectConfig .title{
	position: absolute;
	width: 10%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgb(195,208,215);
}

.Project .projectConfig .context{
	position: absolute;
	width: 90%;
	height: 100%;
	left: 10%;
	top: 0px;
	background: rgb(230,185,125);
}

.Project .projectConfig .update{
	line-height: 70px;
}

.Project .projectConfig .update button{
	width: 80px;
	height: 40px;
}

.Project .projectPath{
	position: absolute;
	left: 320px;
	top: 0px;
	width: 320px;
	height: 400px;
}

.Project .projectPath .projectPath-context{
	position: relative;
	height: 195.2px;
	border-style: ridge;
}

.Project .projectPath .title{
	position: relative;
	height: 20px;
	background: rgb(200,210,230);
}

.Project .projectPath .context{
	position: relative;
	height: 175.2px;
	overflow-y: scroll;
	background: rgb(230,185,125);
}
.Project .projectPath .context input{
	width: 160px;
}
.Project .projectPath .context .remove {
	width: 30px;
}
.Project .projectPath .context .add {
	width: 60px;
}
.Project .code{
	position: absolute;
	left: 320px;
	bottom: 0px;
	width: 315.2px;
	height: 95.2px;
	border-style: ridge;
	background: rgb(220,220,220);
}
.select-content .FileSystem div{
	text-align: left;
	padding: 0 20px;
}
.FileSystem #nowPath{
	position: relative;
	height: 40px;
	line-height: 40px;
	background: rgb(240,235,225);
}
.FileSystem #fileList{
	position: relative;
	height: 420px;
	line-height: 30px;
	background: rgb(220,220,220);
	overflow-y: scroll;
}
.FileSystem button{
	height: 30px;
}
.FileSystem #fileList .fileName{
	position: relative;
	width: 300px;
	text-align: left;
}
.FileSystem #fileList .remove{
	position: relative;
	width: 60px;
}
.FileSystem #fileList .fileName img{
	position: absolute;
	width: 20px;
	height: 20px;
	left: 0px;
	top: 5px;
	padding: 0px;
}
.FileSystem #fileList .fileName div{
	position: absolute;
	width: 270px;
	height: 20px;
	left: 25px;
	top: 5px;
	line-height: 20px;
	padding: 0px;
	overflow: hidden;
}
.FileSystem #fileHandle{
	position: relative;
	height: 40px;
	line-height: 40px;
	background: rgb(240,235,225);
}
.FileSystem #fileHandle #selectFile{
	position: absolute;
	visibility: hidden;
}
#ConsoleMain{
	text-align: left;
	background: rgb(240,240,240);
}
.Console #ConsoleText{
	width: 99%;
	height:400px;
	overflow-y: scroll;
	color: rgb(240,240,240);
	background: rgb(0,0,0);
}
.Console .bottom{
	width: 100%;
	height: 80px;
	text-align: left;
}
.Console #AnalogHTTP{
	width:94%;
	height:80px;
	overflow-y: scroll;
	color: rgb(0,0,0);
	background: rgb(240,240,240);
}
.Console #AnalogButton{
	position: absolute;
	width: 30px;
	height: 86px;
	right: 0px;
	bottom: 4px;
}
#ListDiv{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	text-align: center;
	background: #F5F5DC;
}
#ListDiv #ListTitle{
	position: absolute;
	width: 100%;
	height: 40px;
	top: 0px;
	line-height: 40px;
	background: rgb(230,210,185);
}
#ListDiv #ListContent{
	position: absolute;
	width: 100%;
	height: 460px;
	top: 40px;
	overflow-y: scroll;
	background: rgb(230,185,125);
}
#ListDiv #ListContent label{
	height: 30px;
	line-height: 30px;
	background: rgb(220,230,235);
}
#ListDiv #ListContent input{
	width: 200px;
	overflow-x: hidden;
}
#ListDiv #ListContent button{
	height: 30;
	width: 60px;
}
#ListDiv #ListContent .sessionId{
	width: 160px;
}
#ListDiv #ListContent .time{
	width: 80px;
}
#ListDiv #ListContent .proxyUrl{
	width: 160px;
}
#ListDiv #ListContent .destination{
	width: 200px;
}
#ListDiv #ListClose{
	position: absolute;
	width: 80px;
	height: 40px;
	right: 0px;
	top: 0px;
}
#CodeDiv{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	background: #DCDCDC;
}
#CodeTitle{
	position: absolute;
	width: 100%;
	height: 40px;
	top: 0px;
	text-align: center;
	line-height: 40px;
	background: rgb(255,250,240);
}
#CodeContent{
	position: absolute;
	width: 100%;
	height: 460px;
	top: 40px;
}
#CodeClose{
	position: absolute;
	width: 80px;
	height: 40px;
	right: 0px;
	top: 0px;
}
#CodeChange{
	position: absolute;
	width: 80px;
	height: 40px;
	left: 0px;
	top: 0px;
}
#foot {
	position: relative;
	height: 80px;
	border-style: ridge;
	text-align: center;
	color: rgb(200,200,200);
	background: rgb(145,155,160);
}
